<template>
  <div class="max-box">
    <div class="header-box">
      <div class="header-left">
        <span>热成像</span>
      </div>

      <div class="camera-style">
        <span>切换摄像头：</span>
        <myDrop
          :dropdownList="cameraList"
          :defaultFlag.sync="dropValue"
          class="drop-style"
        />
      </div>
      <a-icon type="sync" @click="getVideo" class="reload-icon" />
    </div>
    <div class="content-box">
      <div class="tarbar-box">
        <div class="tabs">
          <div
            class="tab-one"
            v-for="tab in tabList"
            :class="activeTab == tab.value ? 'active-tab' : ''"
            @click="changeTab(tab.value)"
          >
            <span></span>
            <div>{{ tab.label }}</div>
          </div>
        </div>
      </div>

      <div class="tab-content" v-if="activeTab == 1">
        <object
          class="video-style"
          events="True"
          type="application/x-vlc-plugin"
          codebase="https://mirrors.neusoft.edu.cn/videolan/vlc/3.0.16/win32/vlc-3.0.16-win32.exe"
          v-for="item in currentCarema"
        >
          <a
            href="https://mirrors.neusoft.edu.cn/videolan/vlc/3.0.16/win32/vlc-3.0.16-win32.exe"
            class="download"
            >前往下载视频播放软件</a
          >
          <param name="mrl" :value="item.httpUrl" />
          <param name="volume" value="50" />
          <param name="autoplay" value="true" />
          <param name="loop" value="false" />
          <param name="fullscreen" value="false" />
        </object>
      </div>

      <!-- <div v-if="activeTab == 1">
        <video id="Video1" class="video-js" data-setup="{}" muted="muted" v-if="url" controls>
          <source :src="url" type="video/mp4"></source>
  <source :src="url" type="video/webm"></source>
  <source :src="url" type="video/ogg"></source>
<source :src="url" type="application/x-mpegURL"></source>
<source :src="url" type="video/x-flv">
          <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading
            to a web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank"
              >supports HTML5 video</a
            >
          </p>
        </video>
      </div> -->
      <div v-else class="img-box">
        <a-empty v-if="!imgsrc" description="正在获取图片" />
        <img :src="imgsrc" alt="" class="img-base" v-else />
        <div class="img-msg">
          <span>摄像名称：</span>
          {{ cameraWeb }}
        </div>
        <div class="img-msg">
          <span>创建时间：</span>
          {{ imgCreateTime }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { getVideoApi } from "@/api/video.js";
import videojs from "video.js";
export default {
  data() {
    return {
      url: "",
      cameraList: [
        { value: "xj1", label: "xj1" },
        { value: "xj2", label: "xj2" },
        { value: "xj3", label: "xj3" },
        { value: "xj4", label: "xj4" },
        { value: "xj5", label: "xj5" },
        { value: "xj6", label: "xj6" },
      ],
      dropValue: "xj1",
      cameraData: [],
      tabList: [
        {
          value: "1",
          label: "视频",
        },
        {
          value: "2",
          label: "图片",
        },
      ],
      activeTab: "1",
      socket: null,
      imgsrc: "",
      cameraWeb: "",
      imgCreateTime: "",
    };
  },
  methods: {
    getVideo() {
      getVideoApi({}).then((res) => {
        console.log(res);
        this.cameraData = res.data.data;

        this.url = res.data.data[0].ch[0].httpUrl;
        // this.play();
        // this.playVideo();
        console.log(this.url);
      });
    },
    changeTab(index) {
      if (index == this.activeTab) return;
      this.activeTab = index;
    },
    websocketUse() {
      this.socket = new WebSocket(
        `wss://clakesolar.chu.edu.cn/websocket/${this.$store.state.User.uerInfo.id}`
      );
      this.socket.onopen = (e) => {};
      this.socket.onmessage = (e) => {
        let imgData = JSON.parse(e.data);
        this.cameraWeb = imgData.cameraName;
        this.imgCreateTime = imgData.createTime;
        this.imgsrc = imgData.markedBase64;
      };
      this.socket.onerror = (e) => {};
    },
    // playVideo() {
    //   let videoPlayer = null;
    //   videoPlayer = videojs(document.getElementById("Video1"), {
    //     autoplay: "muted",
    //     controls: false,
    //     loop: true,
    //     muted: false,
    //     fullscreen: {
    //       options: { navigationUi: "hide" },
    //     },
    //     teachOrder: ["html5", "flvjs"],
    //     html5: {
    //       hls: {
    //         withCredentials: true,
    //       },
    //     },
    //     sources: [{ src: this.url, type: "application/x-mpegURL" }],
    //   });
    // },
  },
  computed: {
    currentCarema() {
      let findCamera = this.cameraData.find((item) => {
        return item.cameraName == this.dropValue;
      });
      if (findCamera) {
        return findCamera.ch;
      } else {
        return [];
      }
    },
  },
  mounted() {
    this.getVideo();
    this.websocketUse();
  },
};
</script>
<style lang="less" scoped>
.max-box {
  width: 100%;
  padding-top: 16px;
  padding-right: 20px;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding-right: 20px;
    margin-bottom: 16px;
    .header-left {
      span {
        font-size: 18px;
        color: #252b3a;
      }
      i {
        font-size: 20px;
      }
    }
    .reload-icon {
      font-size: 18px;
      margin-right: 20px;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        color: #048fff;
        transform: rotate(90deg);
      }
    }
  }
  .camera-style {
    display: flex;
    align-items: center;
    span {
      font-size: 12px;
    }
    .drop-style {
      width: 180px;
    }
  }
  .content-box {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;

    .tarbar-box {
      padding-bottom: 12px;
      position: relative;
      padding-right: 16px;
      width: 100%;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tabs {
        display: flex;
        padding-left: 16px;
        align-items: center;
        box-sizing: border-box;
        .tab-one {
          padding: 10px 0 8px 0;
          margin-right: 24px;
          font-size: 12px;
          cursor: pointer;
          color: #515561;
          box-sizing: border-box;
        }
        .open-choose {
          margin-top: 3px;
          cursor: pointer;
          padding-left: 16px;
          border-left: 1px solid rgba(0, 0, 0, 0.1);
          &:hover {
            color: #048fff;
          }
          span {
            margin-right: 1px;
          }
          transition: all 1s;
        }
        .active-choose {
          color: #048fff;
          .icon-down {
            transform: rotate(180deg);
          }
        }
        .active-tab {
          color: #048fff;
          border-bottom: 2px solid #048fff;
        }
      }
    }
    .tab-content {
      display: grid;
      padding: 20px;
      grid-template-columns: 1fr 1fr;
      grid-gap: 30px;
    }
    .img-box {
      width: 100%;
      padding: 20px;
      .img-base {
        width: 100%;
        height: 500px;
        margin-bottom: 20px;
      }
      .img-msg {
        font-size: 14px;
        color: #252b3a;
        margin-top: 10px;
        span {
          color: #00000073;
        }
      }
    }
    .download {
      font-size: 20px;
    }
    .video-style {
      width: 100%;
      height: 400px;
    }
  }
}
</style>